<template>
  <div>
    <el-card>
      <p>提交预约信息</p>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" style="width:220px" />
        </el-form-item>
        <el-form-item label="公司名称" prop="company">
          <el-input v-model="ruleForm.company" style="width:420px" />
        </el-form-item>
        <el-form-item label="公司地址" prop="city">
          <el-input v-model="ruleForm.city" style="width:420px" />
        </el-form-item>
        <el-form-item label="面试方式" prop="way">
          <el-select v-model="ruleForm.way" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="面试时间" prop="time">
          <div class="block">
            <el-date-picker
              v-model="ruleForm.time"
              type="datetime"
              placeholder="选择日期时间"
            />
          </div>
        </el-form-item>
        <el-form-item class="tij">
          <el-button type="primary" @click="add">立即添加</el-button>
          <el-button @click="fan">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      ruleForm: {
        name: '',
        company: '',
        city: '',
        way: '',
        time: ''
      },
      options: [{
        value: '公司面试',
        label: '公司面试'
      }, {
        value: '电话面试',
        label: '电话面试'
      }, {
        value: '视频面试',
        label: '视频面试'
      }],
      rules: {
        name: [
          { required: true, message: '请选择姓名', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请输入公司地址', trigger: 'blur' }
        ],
        way: [
          { required: true, message: '请输入面试方式', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请输入面试时间', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async add() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          var res = await this.http.post('/replay/replay', {
            company: this.ruleForm.company,
            city: this.ruleForm.city,
            way: this.ruleForm.way,
            time: this.ruleForm.time,
            name: this.ruleForm.name
          })
          if (res.status == 201) {
            this.$message.success('添加成功')
            this.$router.push('/mianshi')
          }
        }
      })
    },
    fan() {
      this.$router.push('/mianshi')
    }
  }
}
</script>
<style  scoped>
    .tij{
      margin-top: 100px;
    }
    .el-form{
        margin-top: 20px;
    }
</style>
